<template>
	<view class="page">
		<u-form :model="form" ref="uForm" label-width="140">
			<u-form-item label="原始密码" prop="oldPassword">
				<u-input v-model="form.oldPassword" placeholder="请输入原始密码" type="password" />
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword">
				<u-input v-model="form.newPassword" placeholder="请输入新密码" type="password" />
			</u-form-item>
			<u-form-item label="确认密码" prop="newPasswordAgain">
				<u-input v-model="form.newPasswordAgain" placeholder="请再次输入新密码" type="password" />
			</u-form-item>
		</u-form>
		<view class="dlbutton" hover-class="dlbutton-hover" @click="changePassword"><text>修 改</text></view>
	</view>
</template>
<script>
import { updatePwd } from '@/api/auth.js';
export default {
	name: 'ChangePassword',
	data() {
		return {
			form: {
				oldPassword: undefined, //原始密码
				newPassword: undefined, //新密码
				newPasswordAgain: undefined //确认新密码
			},
			rules: {
				oldPassword: [
					{
						required: true,
						message: '请输入原始密码',
						min: 8,
						trigger: ['blur', 'change']
					}
				],
				newPassword: [
					{
						required: true,
						message: '请输入新密码，至少8位数',
						min: 8,
						trigger: ['blur', 'change']
					}
				],
				newPasswordAgain: [
					{
						required: true,
						message: '请再次输入新密码',
						min: 8,
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	created() {},
	methods: {
		changePassword() {
			if (this.form.newPassword !== this.form.newPasswordAgain) {
				uni.showToast({
					title: '两次新密码不一致，请重新输入',
					duration: 2000,
					icon: 'none'
				});
				this.form.newPasswordAgain = undefined;
				return;
			}
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let query = {
						oldPassword: this.form.oldPassword, //原密码
						newPassword: this.form.newPassword //新密码
					};
					updatePwd(query).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								duration: 2000
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login/index'
								});
							}, 2000);
						} else {
							uni.showToast({
								title: res.message,
								duration: 2000,
								icon: 'none'
							});
						}
					});
				} else {
					console.log('验证失败');
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.page {
	padding: 5%;
	.dlbutton {
		color: #ffffff;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.dlbutton-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.9), rgba(188, 226, 158, 0.9));
	}
}
</style>
